<template>
  <div class="exam-container">
    <el-descriptions title="新增用户" direction="vertical" :column="2" border>
      <!-- column为每行2列 如果列中将span设置为2 则何为1列 -->

      <el-descriptions-item label="名称" :span="1">
        <el-input placeholder="在此输入用户姓名" v-model="name"></el-input>
      </el-descriptions-item>

      <el-descriptions-item label="电话" :span="1">
        <el-input placeholder="在此输入用户手机号码" max="11" v-model="phone"></el-input>
      </el-descriptions-item>

      <el-descriptions-item label="性别" :span="1">
        <el-select v-model="gender" style="width: 100%" class="m-2" placeholder="请选择性别">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-descriptions-item>

      <el-descriptions-item label="组织·职务" :span="2">
        <el-tag>无</el-tag>
        <el-button type="primary" size="small" style="float: right" @click="selectOrg" plain
          >选择</el-button
        >

        <el-dialog v-model="dialogTableVisible_org" title="选择组织">
          <el-skeleton :loading="org_isFirst" :rows="10" animated>
            <div
              style="
                margin: 0 6px 5px 6px;
                border: 1px solid #eee;
                overflow-y: scroll;
                max-height: 600px;
              "
            >
              <el-tree
                :data="o_data"
                show-checkbox
                node-key="id"
                default-expand-all
                :props="defaultProps"
                check-strictly
                :default-checked-keys="organization_id"
                @check="check_change"
                ref="getCheck_org"
              >
              </el-tree>
            </div>
            <el-button
              type="primary"
              style="margin-left: 8px; margin-top: 5px"
              @click="oK_org"
              :disabled="o_button == true"
              >确定</el-button
            >
          </el-skeleton>
        </el-dialog>

        <el-dialog
          v-model="dialogTableVisible_zhiwu"
          title="选择职务"
          :close-on-click-modal="false"
        >
          <el-skeleton :loading="org_isFirst" :rows="10" animated>
            <div
              style="
                margin: 0 6px 5px 6px;
                border: 1px solid #eee;
                max-height: 600px;
              "
            >
              <el-table :data="zhiwuData" style="width: 100%" height="400">
                <el-table-column label="序号" type="index" width="60px"></el-table-column>
                <el-table-column prop="name" label="职务/岗位" width="300" />
                <el-table-column prop="" label="职务/岗位">
                  <template #default>
                      <el-button type="primary" plain>选择</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <el-button
              type="primary"
              style="margin-left: 8px; margin-top: 5px"
              @click="oK_org"
              :disabled="o_button == true"
              >确定</el-button
            >
          </el-skeleton>
        </el-dialog>
      </el-descriptions-item>

      <el-descriptions-item label="" :span="2">
        <el-button
          type="primary"
          size="medium"
          @click="add"
          :disabled="name == '' || phone.length != 11 || orgs.length == 0"
          >新增</el-button
        >
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>
    
    <script lang="ts">
import { defineComponent, onMounted, reactive, toRefs } from 'vue'
import { getOrganizations,getZhiwuList } from '../../../api/org'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRoute, useRouter } from 'vue-router'
import type addTreeOrgDto from '@/dto/org/addTreeOrgDto'

export default defineComponent({
  setup() {
    const router = useRouter()
    const routes = useRoute()
    const defaultProps = {
      children: 'children',
      label: 'name',
      id: 'id'
    }
    const data = reactive({
      dialogTableVisible_org: false,
      dialogTableVisible_zhiwu: false,
      org_isFirst: false,
      // 职务数据
      zhiwuData: [],
      //第二个屏骨架
      twoFirst: true,
      organization_id: [],
      o_data: [],
      o_button: true,
      name: '',
      explain: '',
      lv: 1,
      gender: '男',
      phone: '',
      orgs: [],
      options: [
        {
          value: '男',
          label: '男'
        },
        {
          value: '女',
          label: '女'
        }
      ]
    })

    const events = {
      check_change() {
        console.log(3123123123)
        getZhiwuList({}).then((res:any)=>{
           console.log(res,"jhsdfjsdfjklsdfhjkldf");
           if(res.result===0){
               data.zhiwuData=res.data.data;
           }
        })
        data.dialogTableVisible_zhiwu = true
      },

      /**
       * 选择组织 组织按钮点击事件触发
       */
      selectOrg: () => {
        data.dialogTableVisible_org = true
        data.org_isFirst = true
        if (data.organization_id.length != 0) {
          data.o_button = false
        }
        /**
         * 获取组织列表
         */
        getOrganizations({ page: 1, limit: 9999 }).then((res: any) => {
          if (res.result === 0) {
            data.o_data = res.data.data
            data.org_isFirst = false
          }
        })
      },

      //添加用户
      add() {
        return
        ElMessageBox.confirm('确认新增吗')
          .then(() => {
            addUser({
              explain: data.explain,
              lv: data.lv,
              name: data.name
            }).then((res: any) => {
              console.log(res)
              if (res.result === 0) {
                ElMessage.success('操作成功')
                ElMessageBox.confirm('是否还要继续新增?')
                  .then(() => {
                    data.name = ''
                  })
                  .catch(() => {
                    router.go(-1)
                  })
              } else {
                ElMessage.error(res.message)
              }
            })
          })
          .catch(() => {})
      }
    }

    onMounted(() => {})
    return {
      ...toRefs(data),
      ...events,
      defaultProps
    }
  }
})
</script>
    